.el-menu {
    background: $--menu-background-color;
    border-right: unset !important;
    flex: auto;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100% !important;
    padding-top: 24px;
    transition: all 0.3s ease;
    &::-webkit-scrollbar {
        width: 5px;
        height: 5px
    }

    // 滚动条样式
    // &::-webkit-scrollbar {
    //     width: 6px;
    //     height: 6px
    // }
    // &::-webkit-scrollbar-track {
    //     background: hsla(0,0%,100%,.15);
    //     border-radius: 3px;
    //     -webkit-box-shadow: inset 0 0 5px rgba(37,37,37,.05)
    // }
    // &::-webkit-scrollbar-thumb {
    //     background: hsla(0,0%,100%,.2);
    //     border-radius: 3px;
    //     -webkit-box-shadow: inset 0 0 5px hsla(0,0%,100%,.05)
    // }
    
    // 折叠后样式
    &.el-menu--collapse { 
        & > .el-menu-item > div,
        .el-submenu__title {
            padding: 0 18px !important;
        }
        .el-menu-item{
            margin: 0 10px 8px;
            &.is-active {
                &:after {
                    display: none;
                }
            }
        }
    }

    .el-submenu__title:hover {
        background-color: unset;
    }

    .el-menu-item i,
    .el-submenu__title,
    .el-submenu__title i {
        color: $--menu-item-font-color;
        &:hover {
            color: $--color-primary;
        }
    }
    .is-opened {
        .el-submenu__title,
        .el-submenu__title i {
            color: $--color-primary;
        }
    }

    .el-submenu.is-active {
        .el-submenu__title,
        i {
            color: $--color-primary !important;
        }
    }

    .el-menu-item:hover:not(.is-active),
    .el-submenu__title:hover {
        i {
            color: $--color-primary;
        }
    }
    
    .el-menu-item {
        margin: 0 10px 8px 10px;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        font-weight: 400;
        font-family: PingFangSC-Regular, PingFang SC;
        display: flex;
        align-items: center;
        transition: all 0.3s ease;
        padding-left:16px !important;

        .img-icon {
            width: 16px;
            margin-right: 10px;
        }
        &:hover {
            background-color: unset;
            color: $--color-primary;
        }
        &.is-active {
            background: #F0F8FF;
            border-radius: 5px;
            font-weight: 600;
            color: #000000;
            position: relative;

            &:after {
                content: '';
                position: absolute;
                width: 5px;
                height: 12px;
                background: #1F6FFF;
                border-radius: 3px;
                right: 16px;
                top: 14px;
               
            }
        }
    }
}